<script setup lang="ts">
import LayoutHeader from "./LayoutHeader.vue";
import LayoutLeft from "./LayoutLeft.vue";
import ItemHeader from "./ItemHeader.vue";
import LayTabBar from "./LayTabBar.vue";
import useUIStore from "@/store/modules/ui";
import { useRoute } from "vue-router";

const route = useRoute();
console.log(route);
const ui = useUIStore();
ui.fetch();
</script>

<template>
  <div class="full">
    <el-container>
      <el-header style="padding: 0px">
        <LayoutHeader></LayoutHeader>
      </el-header>
      <el-container>
        <el-aside width="200px" v-show="ui.layoutMode === 'vertical'">
          <LayoutLeft />
        </el-aside>
        <el-main style="padding-top: 0px">
          <LayTabBar />

          <el-scrollbar class="main">
            <router-view v-slot="{ Component }">
              <keep-alive>
                <component
                  :is="Component"
                  :key="`${JSON.stringify($route.fullPath)}-${JSON.stringify($route.params)}-${JSON.stringify($route.query)}`"
                />
              </keep-alive>
            </router-view>
            <ItemHeader></ItemHeader>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.full {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.left {
  height: calc(100vh - 120px);
  border-right: 1px solid;
  border-color: rgb(220, 223, 230);

  .refreshZone {
    background-color: var(--el-color-primary);
  }
}

.main {
  // width: calc(100vw - 220px);
  height: calc(100vh - 90px);
  background-color: var(--el-fill-color-blank);
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.scrollbar-flex-content {
  display: flex;
}

.scrollbar-flex-aside {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* 确保内容区域的高度 */
  overflow: auto;
  /* 允许滚动 */
}

.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
</style>
